<template>
	<view>
		<z-nav-bar
			:bgColor="['#3699ff', '#0075ee']"
			bgColorAngle="90"
			fontColor="#FFF"
			homeState="2000"
			backState="2000">
			<!-- <view class="title-box"  @tap="showOrderTypeAlert=true">
				<text>{{orderTypeName||'日租订单'}}</text>
					<u-icon name="arrow-down" color="#FFFFFF"></u-icon>
			</view> -->
			<view class="title-box"><text>订单管理</text></view>
		</z-nav-bar>
		<!-- 顶部 -->
		<u-sticky :offsetTop="offsetTop">
			<view class="topWrapper">
				<view class="searchBox">
					<view style="display: flex" @tap="showStoreAlert = true">
						<text class="city">{{ storeName }}</text>
						<u-icon name="arrow-down" color="#fff"></u-icon>
					</view>

					<view class="search">
						<u--input
							:value="inputValue"
							clearable
							border="none"
							fontSize="12"
							placeholder="请输入客户名称/手机号/车牌号搜索"
							@blur="isSearch = false"
							@focus="isSearch = true"
							@change="searchChange"
							prefixIcon="search"
							prefixIconStyle="font-size: 22px;color: #909399" />
					</view>
					<view @click="showFilter = true">
						<image
							style="width: 50rpx; height: 50rpx"
							src="/static/other/order_filter.png"
							mode="aspectFill"></image>
					</view>
				</view>
				<!-- 标签 -->
				<u-tabs :list="list" ref="tabs" :current="current" @change="tabChange"></u-tabs>
			</view>
		</u-sticky>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="item" v-for="(item, index) in orderList" :key="item.orderNo">
				<view @click.stop="jumpPage('orderDetail', index)">
					<view class="flex-row-center-sb">
						<text class="title">订单号：{{ item.orderNo | filterNull }}</text>
						<text
							style="color: #00bfbf; max-width: 300rpx; margin-right: 20rpx; font-size: 28rpx"
							v-if="item.orderStatus != 0">
							{{ item.orderStatus | shortOrderStatus }}
						</text>
						<text
							style="color: #00bfbf; max-width: 300rpx; margin-right: 20rpx; font-size: 28rpx"
							v-else>
							{{ item.rentPayType | rentPayType }}-{{ item.orderStatus | shortOrderStatus }}
						</text>
					</view>

					<u-line color="#efefef" margin="0 0 30rpx 0"></u-line>

					<view class="text-line">
						<text class="text-name">预定车型:</text>
						<text class="text-value">
							{{ item.modelName | filterNull }}
						</text>
					</view>

					<view class="text-line flex-row-center">
						<text class="text-name">车牌号:</text>
						<text class="text-value" style="margin-right: 20rpx">{{
							item.carNo | filterNull
						}}</text>
					</view>

					<view class="text-line flex-row-center">
						<text class="text-name">客户信息:</text>
						<text class="text-value" style="margin-right: 20rpx">{{
							item.memberName | filterNull
						}}</text>
					</view>
					<view class="text-line flex-row-center">
						<text class="text-name">发车员:</text>
						<text class="text-value" style="margin-right: 20rpx">{{
							item.salesman | filterNull
						}}</text>
					</view>
					<view class="text-line flex-row-center">
						<text class="text-name">收车员:</text>
						<text class="text-value" style="margin-right: 20rpx">{{
							item.vehicleCollector | filterNull
						}}</text>
					</view>
					<view v-if="item.labels" class="text-line flex-row-center">
						<text class="text-name">订单标签:</text>
						<view class="text-value" style="margin-right: 20rpx">{{
							formatLabel(item.labels)
						}}</view>
					</view>
					<view class="text-line flex-row-center">
						<text class="text-name">订单说明:</text>
						<view class="text-value-order">{{ item.lastOrderRemark | filterNull }}</view>
					</view>
					<view class="text-line">
						<text class="text-name">取还信息:</text>
						<view class="text-value flex-row-center">
							<text
								style="
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									max-width: 250rpx;
								"
								>{{ item.reserveTakeStoreName | filterNull }}</text
							>
							<text style="margin: 16rpx">--</text>
							<text
								style="
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									max-width: 250rpx;
								"
								>{{ item.reserveAlsoStoreName | filterNull }}</text
							>
						</view>
						<!-- <text class="text-value">{{item.reserveTakeStoreName|filterNull}} -- {{item.reserveAlsoStoreName|filterNull}}</text> -->
					</view>
					<view>
						<view class="text-line">
							<view class="text-value start-time"
								>预取:{{ item.rentalStartTime | filterNull }}</view
							>
							<view class="text-value end-time">预还:{{ item.rentalEndTime | filterNull }}</view>
						</view>
					</view>

					<view>
						<view class="text-line">
							<view class="text-value start-time" v-if="item.actualStartTime">
								实取:{{ item.actualStartTime }}</view
							>
							<view class="text-value end-time" v-if="item.actualEndTime"
								>实还:{{ item.actualEndTime }}
							</view>
						</view>
					</view>
				</view>
				<u-line color="#efefef" margin="0 0 10rpx 0"></u-line>
				<view style="display: inline-flex; justify-content: flex-end">
					<template v-if="item.orderClassify == 1">
						<view class="btn-detail" @click="jumpPage('orderDetail', index)"> 订单详情 </view>
					</template>
					<template v-else>
						<view
							class="btn-detail"
							@click="jumpPage('carOperation', index)"
							v-if="(item.orderStatus == 3 || item.orderStatus == 4) && item.control == 1">
							车辆操作
						</view>
						<view
							class="btn-detail"
							@click="jumpPage('staffAllocation', index)"
							v-if="item.orderStatus <= 1 && checkPermi(['order:orderBasic:distribution'])">
							订单分配
						</view>
						<view
							class="btn-detail"
							@click="jumpPage('carAllocation', index)"
							v-if="item.orderStatus == 2 && checkPermi(['order:orderBasic:supplyCar'])">
							订单排车
						</view>
						<view
							class="btn-detail"
							@click="jumpPage('deliveryAndInspection', index)"
							v-if="item.orderStatus == 3 && checkPermi(['order:orderBasic:delivery'])">
							交车验车
						</view>
						<view
							class="btn-detail"
							@click="jumpPage('returnTheCarForInspection', index)"
							v-if="item.orderStatus == 4 && checkPermi(['order:orderBasic:alsoCarTest'])">
							还车验车
						</view>
						<view
							class="btn-detail"
							@click="jumpPage('carDamageSettlement', index)"
							v-if="item.orderStatus == 5"
							>车损结算</view
						>
						<view
							class="btn-detail"
							@click="jumpPage('depositSettlement', index)"
							v-if="item.orderStatus == 6 && checkPermi(['order:orderBasic:depositRefund'])">
							押金结算
						</view>
						<view
							class="btn-detail"
							@click="jumpPage('illegalProcessing', index)"
							v-if="item.orderStatus == 7">
							违章处理</view
						>
						<view
							class="btn-detail"
							@click="jumpPage('illegalSettlement', index)"
							v-if="item.orderStatus == 8 && checkPermi(['order:orderBasic:IllegalProcessing'])">
							违章结算
						</view>
						<view
							class="btn-detail"
							@click="paymentFee(item.orderNo)"
							v-if="
								item.orderStatus != 10 &&
								checkPermi(['order:orderBasic:paymentOfFees']) &&
								item.unpaidAmount > 0
							">
							费用缴纳
						</view>
					</template>
				</view>
			</view>
		</mescroll-body>

		<HomeTabbar :tab="tabIndex"></HomeTabbar>
		<!-- 门店picker -->
		<u-picker
			:show="showStoreAlert"
			:columns="storeList"
			keyName="name"
			closeOnClickOverlay
			@close="showStoreAlert = false"
			@cancel="showStoreAlert = false"
			title="选择门店"
			confirmColor="#1573FF"
			@confirm="confimStore"></u-picker>
		<!-- 订单类型picker -->
		<u-picker
			:show="showOrderTypeAlert"
			:columns="orderTypeList"
			keyName="name"
			closeOnClickOverlay
			@close="showOrderTypeAlert = false"
			@cancel="showOrderTypeAlert = false"
			title="选择订单"
			confirmColor="#1573FF"
			@confirm="confimOrderType"></u-picker>

		<u-popup :show="showPayCost" mode="center" @close="showPayCost = false" closeable round="12">
			<view class="flex-colum-center" style="padding: 40rpx 24rpx">
				<view style="margin-bottom: 30rpx">请选择缴纳费用项</view>
				<view
					class="flex-row-center-sb payCostItem"
					v-for="(item, index) in payCostList"
					:key="index"
					@click="changeCostItem(item)">
					<text>{{ item.remark }}</text>
					<view class="flex-row-center">
						<text style="color: red; margin-right: 10rpx">待付:{{ item.unpaidAmount }}元</text>
						<image
							style="width: 40rpx; height: 40rpx"
							:src="
								item.selected == true
									? '../../static/other/radio_selected.png'
									: '../../static/other/radio_default.png'
							"
							mode="aspectFill"></image>
					</view>
				</view>

				<view class="flex-row-center-sb" style="margin-top: 40rpx; width: 80%">
					<view
						class="alertBtn"
						style="background-color: #f8f8f8; color: #bfc3cc"
						@click="showPayCost = false"
						>取消</view
					>
					<view class="alertBtn" @click="confimPayFee">确定</view>
				</view>
			</view>
		</u-popup>

		<!-- 新增费用弹框 -->
		<u-popup :show="showPopCost" mode="bottom" @close="showPopCost = false" closeable round="12">
			<view class="flex-colum-center" style="padding: 40rpx 24rpx 20rpx">
				<view style="margin-bottom: 30rpx">新增收费项</view>
				<uni-forms ref="form">
					<uni-forms-item label="收费项名称" labelWidth="90" required>
						<view
							><u--input
								v-model="customCost.chargeProjectName"
								placeholder="请输入收费项名称"></u--input
						></view>
					</uni-forms-item>

					<uni-forms-item label="收费类型" required>
						<uni-data-checkbox v-model="customCost.chargeItemsType" :localdata="chargeItemsTypes" />
					</uni-forms-item>

					<uni-forms-item label="单价" labelWidth="90" required>
						<view
							><u--input
								v-model="customCost.unitPrice"
								type="number"
								placeholder="请输入单价"></u--input>
						</view>
					</uni-forms-item>

					<uni-forms-item label="数目" labelWidth="90" required>
						<view
							><u--input
								v-model="customCost.number"
								type="number"
								placeholder="请输入数量"></u--input
						></view>
					</uni-forms-item>

					<uni-forms-item label="费用合计" labelWidth="90">
						<view>
							<text style="position: relative; top: 15rpx">{{
								customCost.number * customCost.unitPrice || "0"
							}}</text>
						</view>
					</uni-forms-item>
				</uni-forms>

				<view class="commitBtn" @click="commitCost">提交</view>
			</view>
		</u-popup>

		<u-popup :show="showFilter" @close="close" mode="right">
			<view class="filterContent">
				<view style="color: #333; font-size: 28rpx; margin-bottom: 20rpx">缴费状态</view>
				<view class="filterMain">
					<text
						class="filterItem"
						:class="{ active: paymentStatus === item.paymentStatus }"
						v-for="(item, index) in filterList"
						:key="item.paymentStatus"
						@click.stop="changeStatus(item)">
						{{ item.name }}
					</text>
				</view>
				<view style="margin-top: 20rpx">
					<view style="color: #333; font-size: 28rpx; margin-bottom: 20rpx">下单时间</view>
					<uni-datetime-picker v-model="creatTimeRange" type="daterange" rangeSeparator="至" />
				</view>
				<view style="margin-top: 20rpx">
					<view style="color: #333; font-size: 28rpx; margin-bottom: 20rpx">预约取车时间</view>
					<uni-datetime-picker v-model="takeTimeRanges" type="daterange" rangeSeparator="至" />
				</view>
				<view style="margin-top: 20rpx">
					<view style="color: #333; font-size: 28rpx; margin-bottom: 20rpx">预约还车时间</view>
					<uni-datetime-picker v-model="alsoTimeRanges" type="daterange" rangeSeparator="至" />
				</view>
				<view style="margin-top: 20rpx">
					<view style="color: #333; font-size: 28rpx; margin-bottom: 20rpx">实际取车时间</view>
					<uni-datetime-picker v-model="actualTakeRanges" type="daterange" rangeSeparator="至" />
				</view>
				<view style="margin-top: 20rpx">
					<view style="color: #333; font-size: 28rpx; margin-bottom: 20rpx">实际还车时间</view>
					<uni-datetime-picker v-model="actualAlsoRanges" type="daterange" rangeSeparator="至" />
				</view>

				<view class="bottomView">
					<view class="cancleBtn" @click="resetFilter">重置</view>
					<view class="confimBtn" @click="confimFilter">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import HomeTabbar from "@/components/tabbar/tabbar";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import * as api from "@/api/order-api.js";
	import { getAllLabel } from "@/api/home-api.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			HomeTabbar,
		},
		data() {
			return {
				customeStyle: {
					width: "600rpx",
				},
				showFilter: false,
				showStoreAlert: false,
				showOrderTypeAlert: false,
				showPayCost: false,
				inputValue: "",
				orderType: "",
				orderTypeName: "",
				isSearch: false,
				paymentStatus: 0,
				confimPaymentStatus: 0,
				filterList: [
					{
						name: "全部订单",
						paymentStatus: 0,
					},
					{
						name: "押金待缴订单",
						paymentStatus: 1,
					},
					{
						name: "租金待缴订单",
						paymentStatus: 2,
					},
					{
						name: "全部缴清订单",
						paymentStatus: 3,
					},
				],
				list: [
					{
						name: "全部",
						status: 1,
					},
					{
						name: "待支付",
						status: 2,
					},
					{
						name: "待分配",
						status: 3,
					},
					{
						name: "待排车",
						status: 4,
					},
					{
						name: "待取车",
						status: 5,
					},
					{
						name: "用车中",
						status: 6,
					},
					{
						name: "结算中",
						status: 7,
					},

					{
						name: "已完成",
						status: 8,
					},
					{
						name: "已取消",
						status: 9,
					},
				],

				current: 0,
				storeId: "",
				storeName: "全部门店",
				status: 100,
				orderList: [],
				// offsetTop: 0,
				orderTypeList: [
					[
						{
							name: "日租订单",
							id: 1,
						},
						{
							name: "月租订单",
							id: 2,
						},
						{
							name: "豪车订单",
							id: 3,
						},
					],
				],
				//代缴纳费用项
				payCostList: [],
				currentPayItem: null,
				currentOrderNo: "",
				showPopCost: false,
				chargeItemsTypes: [
					{
						value: 1,
						text: "按次",
					},
					{
						value: 2,
						text: "按天",
					},
					// {
					// 	value: 3,
					// 	text: '按里程'
					// }
				],
				customCost: {
					chargeProjectName: "",
					chargeMoney: "",
					chargeItemsType: 1,
					canEdit: 3,
					number: "1",
					unitPrice: "",
				},
				// tabIndex:1,
				labelList: [],
				creatTimeRange: [],
				startTime: "",
				endTime: "",
				takeTimeRanges: [],
				takeStartTime: "",
				takeEndTime: "",
				alsoTimeRanges: [],
				alsoStartTime: "",
				alsoEndTime: "",
				actualTakeRanges: [],
				actualTakeStartTime: "",
				actualTakeEndTime: "",
				actualAlsoRanges: [],
				actualAlsoStartTime: "",
				actualAlsoEndTime: "",
			};
		},
		computed: {
			storeList() {
				let result = [this.$store.state.initData.initData.storeList];
				const allObj = {
					id: "",
					name: "全部门店",
				};
				if (result?.length > 0) {
					result[0]?.unshift(allObj);
				}

				return result;
			},
			offsetTop() {
				return (
					uni.getSystemInfoSync()["statusBarHeight"] +
					(92 / 750) * uni.getSystemInfoSync().windowWidth -
					0.5
				);
			},
			navigationList() {
				return this.$store.state.initData.initData.navigationList;
			},
			tabIndex() {
				let tabIndex = 1;
				this.navigationList?.map((item, index) => {
					if (item.name == "订单管理") {
						tabIndex = index;
					}
				});
				// #ifdef APP
				return tabIndex + 1;
				// #endif
				// #ifdef MP-WEIXIN
				return tabIndex;
				// #endif
			},
		},
		onReady() {
			// #ifdef APP-PLUS||MP-ALIPAY
			uni.hideTabBar();
			// #endif
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"],
			});
			// #endif

			//获取手机状态栏高度
			// this.offsetTop = uni.getSystemInfoSync()['statusBarHeight'] + (92 / 750 * uni.getSystemInfoSync().windowWidth)-0.5;
			uni.$on("refreshOrder", (data) => {
				this.mescroll.triggerDownScroll();
			});
			this.getLabels();
		},
		methods: {
			getLabels() {
				getAllLabel().then((res) => {
					this.labelList = res.data || [];
				});
			},
			formatLabel(labels) {
				return this.labelList
					.filter((item) => {
						return labels?.split(",").indexOf(item.id + "") >= 0;
					})
					.map((i) => {
						return i.name;
					})
					.join(",");
			},
			configTabIndex() {
				let tabIndex = 1;
				if (this.navigationList.length > 0) {
					this.navigationList.map((item, index) => {
						if (item.name === "订单管理") {
							tabIndex = index;
						}
					});
				}
				this.tabIndex = tabIndex;
			},
			//选择订单类型
			confimOrderType(e) {
				this.orderType = e.value[0].id;
				this.orderTypeName = e.value[0].name;
				this.showOrderTypeAlert = false;
				this.mescroll.triggerDownScroll();
			},
			//选择门店
			confimStore(e) {
				this.storeId = e.value[0].id;
				this.storeName = e.value[0].name;
				this.showStoreAlert = false;
				this.mescroll.triggerDownScroll();
			},
			//筛选切换
			changeStatus(item) {
				this.paymentStatus = item.paymentStatus;
			},
			close() {
				this.showFilter = false;
			},
			//重置
			resetFilter() {
				this.paymentStatus = 0;
				this.creatTimeRange = [];
				this.startTime = "";
				this.endTime = "";
				this.takeTimeRanges = [];
				this.takeStartTime = "";
				this.takeEndTime = "";
				this.alsoTimeRanges = [];
				this.alsoStartTime = "";
				this.alsoEndTime = "";
				this.actualTakeRanges = [];
				this.actualTakeStartTime = "";
				this.actualTakeEndTime = "";
				this.actualAlsoRanges = [];
				this.actualAlsoStartTime = "";
				this.actualAlsoEndTime = "";
			},
			// 确认筛选
			confimFilter() {
				this.confimPaymentStatus = this.paymentStatus;
				if (this.creatTimeRange.length == 2) {
					this.startTime = this.creatTimeRange[0];
					this.endTime = this.creatTimeRange[1];
				} else {
					this.startTime = "";
					this.endTime = "";
				}
				if (this.takeTimeRanges.length == 2) {
					this.takeStartTime = this.takeTimeRanges[0];
					this.takeEndTime = this.takeTimeRanges[1];
				} else {
					this.takeStartTime = "";
					this.takeEndTime = "";
				}
				if (this.alsoTimeRanges.length == 2) {
					this.alsoStartTime = this.alsoTimeRanges[0];
					this.alsoEndTime = this.alsoTimeRanges[1];
				} else {
					this.alsoStartTime = "";
					this.alsoEndTime = "";
				}
				if (this.actualTakeRanges.length == 2) {
					this.actualTakeStartTime = this.actualTakeRanges[0];
					this.actualTakeEndTime = this.actualTakeRanges[1];
				} else {
					this.actualTakeStartTime = "";
					this.actualTakeEndTime = "";
				}
				if (this.actualAlsoRanges.length == 2) {
					this.actualAlsoStartTime = this.actualAlsoRanges[0];
					this.actualAlsoEndTime = this.actualAlsoRanges[1];
				} else {
					this.actualAlsoStartTime = "";
					this.actualAlsoEndTime = "";
				}
				this.showFilter = false;
				this.mescroll.triggerDownScroll();
			},
			upCallback(page) {
				let param = {
					reserveTakeStoreId: this.storeId,
					keyWord: this.inputValue,
					pageNum: page.num,
					pageSize: page.size,
					type: this.status,
					paymentStatus: this.confimPaymentStatus,
					startTime: this.startTime,
					endTime: this.endTime,
					takeStartTime: this.takeStartTime,
					takeEndTime: this.takeEndTime,
					alsoStartTime: this.alsoStartTime,
					alsoEndTime: this.alsoEndTime,
					actualTakeStartTime: this.actualTakeStartTime,
					actualTakeEndTime: this.actualTakeEndTime,
					actualAlsoStartTime: this.actualAlsoStartTime,
					actualAlsoEndTime: this.actualAlsoEndTime,
				};
				api
					.apiOrderBasicList(this.toParams(param))
					.then((res) => {
						//设置列表数据
						if (page.num == 1) {
							this.orderList = [];
						} //如果是第一页需手动制空列res.表
						// let tmpList = res.rows.map(item => {
						// 	let obj = {
						// 		orderNo: item.orderNo,
						// 		orderStatus: item.orderStatus,
						// 		rentPayType: item.rentPayType,
						// 		modelName: item.modelName,
						// 		carNo: item.carNo,
						// 		memberType: item.memberType,
						// 		memberName: item.memberName,
						// 		salesman: item.salesman,
						// 		vehicleCollector: item.vehicleCollector,
						// 		labels: item.labels,
						// 		lastOrderRemark: item.lastOrderRemark,
						// 		reserveTakeStoreName: item.reserveTakeStoreName,
						// 		reserveAlsoStoreName: item.reserveAlsoStoreName,
						// 		rentalStartTime: item.rentalStartTime,
						// 		rentalEndTime: item.rentalEndTime,
						// 		actualStartTime: item.actualStartTime,
						// 		actualEndTime: item.actualEndTime,
						// 		orderClassify: item.orderClassify,
						// 		unpaidAmount: item.unpaidAmount,
						// 		yjbj: item.yjbj,
						// 		wzbj: item.wzbj,
						// 		reserveTakeStoreId: item.reserveTakeStoreId,
						// 		reserveAlsoStoreId: item.reserveAlsoStoreId,
						// 	}
						// 	return obj;
						// })
						// this.orderList = this.orderList.concat(tmpList); //追加新数据
						// console.log('orderList', this.orderList);
						this.orderList = this.orderList.concat(res.rows); //追加新数据
						this.mescroll.endBySize(res.rows.length, res.total);
					})
					.catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					});
				// this.mescroll.endSuccess();
			},

			//搜索
			searchChange(value) {
				this.inputValue = value;
				this.mescroll.triggerDownScroll();
			},
			//切换标签
			tabChange(e) {
				console.log(e);
				this.current = e.index;
				this.status = e.status;
				this.mescroll.triggerDownScroll();
			},
			// 拨打电话
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				});
			},
			jumpPage(path, index) {
				const orderItemInfo = this.orderList[index];
				console.log(orderItemInfo, "orderItemInfoorderItemInfo");
				var item = {
					...orderItemInfo,
					carId: orderItemInfo.carId,
					orderNo: orderItemInfo.orderNo,
					memberName: orderItemInfo.memberName,
					orderStatus: orderItemInfo.orderStatus,
					memberType: orderItemInfo.memberType,
					memberPhone: orderItemInfo.memberPhone,
					carNo: orderItemInfo.carNo,
					modelName: orderItemInfo.modelName,
					rentalStartTime: orderItemInfo.rentalStartTime,
					rentalEndTime: orderItemInfo.rentalEndTime,
					actualStartTime: orderItemInfo.actualStartTime,
					actualEndTime: orderItemInfo.actualEndTime,
					yjbj: orderItemInfo.yjbj,
					wzbj: orderItemInfo.wzbj,
					reserveTakeStoreId: orderItemInfo.reserveTakeStoreId,
					reserveAlsoStoreId: orderItemInfo.reserveAlsoStoreId,
					control: orderItemInfo.control,
				};
				// 判断车辆押金|违章押金是否结清
				if (path == "depositSettlement" || path == "illegalSettlement") {
					var param = "";
					if (path == "depositSettlement") {
						param = item.orderNo + "/1";
					} else {
						param = item.orderNo + "/2";
					}
					api.orderCostIspay(param).then((res) => {
						if (res.data.code == 1) {
							uni.showModal({
								title: "提示",
								content: res.data.title,
								cancelText: "取消",
								confirmText: "确认结算",
								success: (res) => {
									if (res.confirm) {
										uni.navigateTo({
											url:
												"/order/shortOrder/" +
												path +
												"?item=" +
												encodeURIComponent(JSON.stringify(item)),
										});
									}
								},
							});
						} else {
							uni.navigateTo({
								url:
									"/order/shortOrder/" + path + "?item=" + encodeURIComponent(JSON.stringify(item)),
							});
						}
					});
				} else if (orderItemInfo.orderClassify == 1) {
					console.log("-----", orderItemInfo.orderClassify);
					uni.navigateTo({
						url:
							"/order/shortOrder/otaOrderDetail" +
							"?item=" +
							encodeURIComponent(JSON.stringify(item)),
					});
				} else {
					uni.navigateTo({
						url: "/order/shortOrder/" + path + "?item=" + encodeURIComponent(JSON.stringify(item)),
					});
				}
			},
			//费用缴纳按钮
			paymentFee(orderNo) {
				this.currentOrderNo = orderNo;
				this.currentPayItem = null;
				this.payCostList = [];
				api.getAllPaymentOfFees(orderNo).then((res) => {
					let data = res.data;
					data.map((item) => {
						if (item.unpaidAmount > 0 && item.payStatus == 1) {
							this.payCostList.push(item);
						}
					});
					if (this.payCostList.length > 0) {
						this.showPayCost = true;
					} else {
						uni.$u.toast("暂无可缴纳费用");
					}
				});
			},
			//新增费用
			addCost(item) {
				this.customCost.chargeProjectName = "";
				this.customCost.unitPrice = "";
				this.customCost.number = "1";
				this.showPopCost = !this.showPopCost;
				this.currentOrderNo = item.orderNo;
			},
			//确定提交费用项
			commitCost() {
				if (uni.$u.test.isEmpty(this.customCost.chargeProjectName)) {
					uni.$u.toast("请输入费用项名称");
					return;
				} else if (uni.$u.test.isEmpty(this.customCost.unitPrice)) {
					uni.$u.toast("请输入单价");
					return;
				} else if (uni.$u.test.isEmpty(this.customCost.number)) {
					uni.$u.toast("请输入数目");
					return;
				} else if (this.customCost.number == "0") {
					uni.$u.toast("数目不能为0,请重新输入");
					return;
				} else {
					this.customCost.chargeMoney = this.customCost.number * this.customCost.unitPrice;
					api
						.addNewExpenses({
							orderNo: this.currentOrderNo,
							chargeItemsVo: [this.customCost],
						})
						.then((res) => {
							uni.showToast({
								title: "新增费用成功",
							});
							this.showPopCost = false;
						});
				}
			},
			//费用缴纳
			changeCostItem(item) {
				this.payCostList.map((costItem) => {
					costItem.selected = false;
				});
				item.selected = true;
				this.currentPayItem = item;
				this.$forceUpdate();
			},
			confimPayFee() {
				this.showPayCost = false;
				if (this.currentPayItem) {
					uni.navigateTo({
						url:
							"/order/shortOrder/orderPayFee?type=" +
							this.currentPayItem.type +
							"&orderNo=" +
							this.currentOrderNo,
					});
				} else {
					uni.$u.toast("请选择需要缴纳的费用项");
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.topWrapper {
		background-color: #fff;

		.searchBox {
			padding: 20upx;
			display: flex;
			align-items: center;
			// background-color: #fff;
			background: linear-gradient(90deg, #3599ff 0%, #0275ed 100%);

			.city {
				font-size: 28rpx;
				font-weight: bold;
				color: #fff;
			}

			.search {
				flex: 1;
				padding: 0 20upx;
				margin: 0 20upx;
				height: 70upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24upx;
				background-color: #ffffff;
				border-radius: 35rpx;
			}
		}
	}

	.item {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 8rpx;
		margin: 10rpx 20rpx;
		padding-bottom: 10rpx;
	}

	.title {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
		margin-left: 20rpx;
	}

	.text-warn {
		font-size: 24rpx;
		color: red;
		margin-right: 20rpx;
	}

	.text-warn-orange {
		color: yellow;
	}

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $uni-color-primary;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
		align-self: flex-end;
	}

	.end-time {
		color: #ff6600;
		width: 300rpx;
		font-size: 24rpx;
	}

	.start-time {
		color: #ff001d;
		width: 300rpx;
		font-size: 24rpx;
		margin-right: 30rpx;
	}

	.title-box {
		/deep/ .u-icon {
			display: inline-block !important;
		}
	}

	.payCostItem {
		height: 80rpx;
		width: 600rpx;
		border-bottom: 1rpx solid #ededed;
	}

	.alertBtn {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #1673ff;
		color: #fff;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.commitBtn {
		background-color: #1673ff;
		border-radius: 12rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		width: 300rpx;
		margin-top: 30rpx;
	}

	.filterContent {
		position: relative;
		padding: 130rpx 35rpx 28rpx;
		width: 550rpx;
		height: 100%;

		.filterMain {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.filterItem {
				width: 200rpx;
				line-height: 52rpx;
				text-align: center;
				background: #efefef;
				border-radius: 6rpx;
				color: #666666;
				font-size: 28rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;

				&.active {
					background: #1673ff;
					color: #ffffff;
				}
			}
		}

		.bottomView {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 500rpx;
			font-size: 30rpx;
			position: absolute;
			bottom: 20rpx;

			.cancleBtn {
				width: 220rpx;
				height: 60rpx;
				border-radius: 4rpx;
				border: 1rpx solid #666;
				color: #333;
				line-height: 60rpx;
				text-align: center;
			}

			.confimBtn {
				width: 220rpx;
				height: 60rpx;
				border-radius: 4rpx;
				background-color: #0275ed;
				color: #fff;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}

	.text-value-order {
		font-size: 28rpx;
		color: #333;
		margin-left: 10rpx;
		width: 500rpx;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 这里是超出几行省略 */
		overflow: hidden;
	}
</style>
